<!--折线图组件-->
<template>
    <div class='container'>
        <div id="LineChartDiv"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import { autoToolTip } from "@/utils/echartsAutoTooltip.js";
export default {
    components: {},
    props: {
        dataVColor: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            lineChart: "",
            chartData: {
                xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                seriesData: [
                    {
                        name: '项目1',
                        data: [],
                    },
                    {
                        name: '项目2',
                        data: [],
                    },
                    {
                        name: '项目3',
                        data: [],
                    },
                ],
            },
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {
        //创建折线图
        async createLineChart(lineData) {
            this.chartData.seriesData[0].data = lineData[0];
            this.chartData.seriesData[1].data = lineData[1];
            this.chartData.seriesData[2].data = lineData[2];
            let { chartData } = this;//获取图表数据
            await (this.lineChart && this.lineChart.dispose());//若之前有，则销毁实例
            this.lineChart = echarts.init(document.getElementById('LineChartDiv'));//初始化echarts
            let option = {
                color: [],
                title: {
                    text: '项目执行情况',
                    top: "5%",
                    left: 'center',
                    textStyle: {
                        color: "#fff"
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    top: "20%",
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisLabel: {
                            color: "#fff",
                        },
                        axisLine: {
                            lineStyle: {
                                color: this.dataVColor[1]
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            color: "#fff",
                        },
                        axisLine: {
                            lineStyle: {
                                color: this.dataVColor[1]
                            }
                        },
                        splitLine: {
                            show: true,//网格设置
                            lineStyle: {
                                color: "#70707033",
                                width: 1,
                                type: "dotted",//虚线
                            },
                        },
                    }
                ],
                series: []
            };
            option.xAxis[0].data = chartData.xAxisData;
            chartData.seriesData.forEach(s => {
                option.color.unshift(this.dataVColor[1]);//注意颜色添加的顺序
                option.series.push(
                    {
                        animationDuration: 3000,//动画时间
                        animationEasing: "cubicInOut",//动画类型
                        name: s.name,
                        type: 'line',
                        smooth: true,
                        stack: 'Total',
                        lineStyle: {
                            width: 1
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            //使用线性渐变颜色(x1,y1,x2,y2,渐变数组)
                            color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
                                {
                                    offset: 0,
                                    color: this.dataVColor[0]
                                },
                                {
                                    offset: 1,
                                    color: "#fff"
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: s.data
                    }
                )
            });
            await (option && this.lineChart.setOption(option));//设置数据
            // 自动轮播
            autoToolTip(this.lineChart, option, {
                interval: 2000,// 轮播间隔时间 默认2s
                loopSeries: false,// 是否循环轮播所有序列
                seriesIndex: 0,// 第1个被轮播的序列下标
            });
        }
    },
};
</script>
<style scoped lang='scss'>
.container {
    height: 100%;
    width: 100%;

    #LineChartDiv {
        height: 100%;
        width: 100%;
    }
}
</style>